<template>
  <Dialoger v-model="isShow" :onConfirm="handleSubmit" :dialogCls="'d-paner-lg'" title="编辑">
    <template v-slot:body>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">名称</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.name" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">导航类型</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.type" class="d-form-select">
              <option v-for="item in pageTypeList" :key="item.id" :value="item.id">{{ item.text }}</option>
            </select>
          </div>
        </div>
        <div v-show="isResourcePage" class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">引用导航</label>
          </div>
          <div class="d-form-el">
            <FormSelecter v-model="state.rid" :data="realPageData" value-key="id" :text-key="'name'" slide-max-height="200px" />
          </div>
        </div>
        <div v-show="isEnvirmentMatch" class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">环境配置</label>
          </div>
          <div class="d-form-el">
            <table class="d-table d-table-bordered d-table-striped d-table-hover">
              <colgroup>
                <col width="200" />
                <col />
                <col width="160">
              </colgroup>
              <thead>
                <tr><th>环境</th><th>地址</th><th>操作</th></tr>
              </thead>
              <tbody>
                <tr v-for="node in state.hrefList" :key="node.id">
                  <td>
                    <select v-model="node.envirment" class="d-form-select">
                      <option value="">无</option>
                      <option v-for="item in envLevelList" :key="item.id" :value="item.id">{{ item.code }}</option>
                    </select>
                  </td>
                  <td>
                    <input v-model="node.href" class="d-form-input" type="text" />
                  </td>
                  <td>
                    <a @click="handleRemoveHrefItem(node)" class="d-tools-item d-text-theme"><DeleteIcon size="sm" /></a>
                  </td>
                </tr>
                <tr>
                  <td class="d-text-center" colspan="3">
                    <a @click="handleAddHrefItem" class="d-tools-item d-text-theme"><PlusIcon size="sm" /></a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">导航地址</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.href" :readonly="!isNormal" class="d-form-input" type="text" />
          </div>
        </div>
        <div v-show="getEnvHref(state)" class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">解析地址</label>
          </div>
          <div class="d-form-el">
            <input :value="getEnvHref(state)" class="d-form-input" type="text" readonly />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">父级</label>
          </div>
          <div class="d-form-el">
            <FormSelecter v-model="state.pid" :data="treeData" value-key="id" :text-key="'name'" slide-max-height="200px" />
            <!--
            <select v-model="state.pid" class="d-form-select">
              <option v-for="item in treeData" :key="item.id" :value="item.id">{{ item.name }}</option>
            </select>
            -->
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">描述</label>
          </div>
          <div class="d-form-el">
            <textarea v-model="state.description" class="d-form-textarea d-form-textarea-neat"></textarea>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">布局(行)</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.layout.rows" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">布局(列)</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.layout.cols" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">显示页头</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.layout.isShowHead" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">显示页签</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.layout.isTabStyle" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">页签类型</label>
          </div>
          <div class="d-form-el">
            <FormSelecter v-model="state.layout.tabType" :data="tabTypeList" value-key="key" slide-max-height="200px" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">页签位置</label>
          </div>
          <div class="d-form-el">
            <FormSelecter v-model="state.layout.tabPosition" :data="tabPositionList" value-key="key" slide-max-height="200px" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">子级页签</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.layout.isTabStyleChild" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">显示开关</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.layout.isShowSwitch" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">显示刷新</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.layout.isShowRefresh" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">显示缩放</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.layout.isShowScale" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">选择环境</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.layout.isShowEnvirment" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">当前环境</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.envirment" class="d-form-select">
              <option value="">无</option>
              <option v-for="item in envirmentList" :key="item.id" :value="item.id">{{ item.code }}</option>
            </select>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">环境配置</label>
          </div>
          <div class="d-form-el">
            <FormSelecter
              cat="tree"
              v-model="state.layout.envList"
              :data="envLevelList"
              value-key="id"
              :text-key="'code'"
              slide-max-height="200px" />
            <!-- <select v-model="state.layout.envList" class="d-form-select">
              <option value="">无</option>
              <option v-for="item in envirmentList" :key="item.id" :value="item.id">{{ item.code }}</option>
            </select> -->
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">覆盖子级</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.layout.isCoverChild" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">覆盖父级</label>
          </div>
          <div class="d-form-el d-form-el-vertical">
            <Switcher v-model="state.layout.isCoverParent" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">关联笔记</label>
          </div>
          <div class="d-form-el">
            <FormSelecter
              cat="tree"
              v-model="state.notes"
              :data="notesList"
              value-key="id"
              :text-key="'title'"
              :multiple="true"
              slide-max-height="200px" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">排序</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.order" class="d-form-input" type="text" placeholder="数值越大越靠前" />
          </div>
        </div>
        <div v-if="!isEdit" class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">书签导入</label>
          </div>
          <div class="d-form-el">
            <FormUploader @change="handleChangeFile" accept="text/html" />
          </div>
        </div>
        <FormCalendar
          v-if="isEdit"
          v-model="state.updateTime"
          :isEditAble="false"
          :readonly="true"
          format="yyyy-MM-dd HH:mm:ss"
          label="修改时间"
          labelWidth="90px"
          class="d-form-group-flex d-col-xs-6"
        ></FormCalendar>
        <div v-if="false && isEdit" class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">修改人</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.updateUser" class="d-form-input" type="text" readonly />
          </div>
        </div>
        <FormCalendar
          v-if="isEdit"
          v-model="state.createTime"
          :isEditAble="false"
          :readonly="true"
          format="yyyy-MM-dd HH:mm:ss"
          label="创建时间"
          labelWidth="90px"
          class="d-form-group-flex d-col-xs-6"
        ></FormCalendar>
        <div v-if="false && isEdit" class="d-form-group d-form-group-flex d-col-xs-6">
          <div class="d-form-label d-text-right">
            <label class="label-text">创建人</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.createUser" class="d-form-input" type="text" readonly />
          </div>
        </div>
      </div>
    </template>
  </Dialoger>
</template>

<script>
import { mapState } from 'vuex'
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger, FormCalendar, Switcher, FormSelecter, FormUploader } from '@daelui/vdog/dist/components'
import { DeleteIcon, PlusIcon } from '@daelui/vdog/dist/icons'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import { parser, strer, treer, filer, objecter } from '@daelui/dogjs/dist/components'
import naveSer from '../../service/action/nave.action.js'
import noteSer from '../../service/action/note.action.js'
import naveBus from './business/nave'
import { state } from '../../service/stock/index.js'

export default {
  components: {
    PanerForm,
    FormCalendar,
    FormSelecter,
    Switcher,
    Dialoger,
    DeleteIcon,
    PlusIcon,
    FormUploader
  },

  data () {
    return {
      isShow: false, // 窗口是否显示
      isEdit: false, // 是否是编辑模式,
      // 编辑信息
      editInfo: {},
      // 表单数据
      state: {
        id: '',
        name: '',
        href: '',
        hrefList: [],
        layout: {
          rows: 4,
          cols: 4,
          isShowHead: true,
          isTabStyle: false,
          isShowSwitch: true,
          isShowRefresh: true,
          isShowScale: true,
          isCoverChild: false,
          isCoverParent: false,
          isShowEnvirment: false,
          envList: []
        },
        order: 1,
        type: '',
        rid: '',
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      },
      // 书签列表
      bookmarks: [],
      // 导航类型列表
      pageTypeList: state.pageTypeList,
      // 页签风格
      tabTypeList: state.tabTypeList,
      // 页签位置
      tabPositionList: state.tabPositionList,
      isNormal: true,
      // 导航数形数据
      treeData: [],
      // 环境规则列表
      ruleEnvList: [],
      // 环境列表
      envirmentList: [],
      // 树形结构
      envLevelList: [],
      // 当前环境
      envirment: '',
      // 关联笔记列表
      notesList: []
    }
  },

  computed: {
    ...mapState([
      'pageTypeEnum'
    ]),
    // 具有导航地址的集合
    realPageData () {
      return this.treeData.filter(item => {
        return true // !!item.href
      })
    },

    /**
     * @function 是否普通导航
    */
    isResourcePage () {
      return naveBus.isResourcePage(this.state)
    },

    /**
     * @function 是否普通导航
    */
    isEnvirmentMatch () {
      return naveBus.isEnvirmentMatch(this.state)
    }
  },

  watch: {
    'state.type': function () {
      this.isNormal = naveBus.isNormal(this.state)
    }
  },

  methods: {
    /**
     * @function 加载导航
    */
    loadItem (id) {
      naveSer.queryItem({ id }).then(result => {
        let data = result.data || {}
        data.layout = parser.toObject(data.layout)
        data.hrefList = parser.toObject(data.hrefList)
        data.hrefList = Array.isArray(data.hrefList) ? data.hrefList : []
        this.state = data
      })
    },

    /**
     * @function 显示与隐藏
    */
    show (data) {
      this.isShow = !!data
      data = data || {}
      this.editInfo = data
      if (data.edit) {
        this.isEdit = true
        data.item.layout = data.item.layout || {}
        data.item.hrefList = parser.toObject(data.item.hrefList)
        data.item.hrefList = Array.isArray(data.item.hrefList) ? data.item.hrefList : []
        this.state = objecter.clone(data.item)
      } else {
        this.isEdit = false
        let newItem = {
          name: '',
          href: '',
          hrefList: [],
          layout: {
            rows: 4,
            cols: 4,
            isShowHead: true,
            isTabStyle: false,
            isShowSwitch: true,
            isShowRefresh: true,
            isShowScale: true,
            isCoverChild: false,
            isCoverParent: false,
            isShowEnvirment: false,
            envList: []
          },
          order: 1
        }
        data.item = data.item || {}
        // 添加子级
        if (data.parent) {
          newItem.pid = data.item.id || ''
        } else if (data.prev) { // 添加同级
          newItem.prevId = data.item.id
        }
        this.state = newItem
      }
      this.state.layout = parser.toObject(this.state.layout)
      // 查询导航数据
      naveBus.queryTreeData().then((list) => {
        list = list.filter((item) => {
          return item.id !== this.state.id
        })
        this.treeData = list
      })
    },

    /**
     * @function 获取节点地址
    */
    getEnvHref (node) {
      return naveBus.getEnvHref(node, this.envirmentList, this.envirment)
    },

    handleAddHrefItem () {
      this.state.hrefList = Array.isArray(this.state.hrefList) ? this.state.hrefList : []
      this.state.hrefList.push({
        id: strer.utid(),
        href: '',
        envirment: ''
      })
    },

    handleRemoveHrefItem (item) {
      this.state.hrefList = Array.isArray(this.state.hrefList) ? this.state.hrefList : []
      this.state.hrefList = this.state.hrefList.filter(node => {
        return item !== node
      })
    },

    /**
     * @function 导入书签
    */
    handleChangeFile (files) {
      let file = files[0]
      filer.readFileText(file).then(text => {
        this.bookmarks = filer.resolveBookMarks(text)
        let node = {
          hrefList: [],
          layout: JSON.stringify({
            rows: 4,
            cols: 4,
            isShowHead: true,
            isTabStyle: false,
            isShowSwitch: true,
            isShowRefresh: true,
            isShowScale: true,
            isCoverChild: false,
            isCoverParent: false,
            isShowEnvirment: false,
            envList: []
          }),
          order: 1
        }
        treer.forEach(this.bookmarks, item => {
          Object.assign(item, node, item)
        })
      })
    },

    /**
     * @function 提交
    */
    handleSubmit (b) {
      let defer = null
      let data = Object.assign({}, this.state)
      data.layout = parser.stringify(data.layout)
      data.hrefList = parser.stringify(data.hrefList)
      delete data.children
      // 书签数据
      if (this.bookmarks && this.bookmarks.length) {
        data.childList = this.bookmarks
        let first = this.bookmarks[0]
        if (this.bookmarks.length === 1 && !first.href) {
          data.childList = first.children
          data.name = data.name || first.name
        }
        data.name = data.name || '书签导入'
      }
      // 编辑
      if (this.isEdit) {
        defer = naveSer.editItem(data)
      } else { // 添加
        defer = naveSer.addItem(data)
      }
      return defer.then(result => {
        let b = true
        if (result.success) {
          Dialoger.success(locale.action.success)
          this.$emit('onSubmitSuccess', data)
        } else {
          b = false
          Dialoger.danger(locale.action.fail)
        }
        return b
      })
    }
  },

  // beforeMount () {
  //   let params = this.$route.params
  //   // 新建
  //   if (!params.id) {
  //     this.isEdit = false
  //   } else { // 编辑
  //     this.isEdit = true
  //     this.loadItem(params.id)
  //   }
  // },

  mounted () {
    // 查询环境列表
    naveBus.queryListByGroup().then(res => {
      this.envirment = res.data.envirment
      this.envirmentList = res.data.envirmentList
      this.envLevelList = res.data.envLevelList
      this.ruleEnvList = res.data.ruleEnvList
    })
    //查询笔记列表
    noteSer.queryListOptions().then(res => {
      let data = res.data
      data = Array.isArray(data) ? data : []
      this.notesList = data
    })
  }
}
</script>

<style lang="less" scoped>
.d-row {
  .d-form-group:last-child {
    margin-bottom: 0;
  }
}
.d-form-label {
  width: 90px;
}
// .d-form-textarea {
//   min-height: 320px;
// }
</style>
